<template>
  <div>
    <tab-bar class="tab-bar">
      <tab-ietm v-for="item in tabbar" :key="item.id" :path="item.path">
        <i class="iconfont" :class="item.icon" slot="top"></i>
        <span slot="bottom">{{ item.item }}</span>
      </tab-ietm>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from 'components/common/tabbar/TabBar.vue'
import TabIetm from 'components/common/tabbar/TabIetm.vue'
export default {
  name: 'MainTabBar',
  components: { TabBar, TabIetm },
  data() {
    return {
      tabbar: [
        { id: '001', item: '电影', icon: 'icon-dianying', path: '/films' },
        { id: '002', item: '影院', icon: 'icon-yingyuan', path: '/cinema' },
        { id: '003', item: '资讯', icon: 'icon-zixun1', path: '/message' },
        { id: '004', item: '我的', icon: 'icon-tubiaolunkuo-', path: '/center' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  background: white;
}
</style>